<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>班车线路-江城巴士</title>
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">
    
    <link rel="stylesheet" href="css/app.css">
</head>

<body>

<header>
    <div class="title">班车线路</div>
</header>

<section class="wrap route-box">
    <div class="slide">
        <ul>
            <li>
                <img src="images/banner_bus.jpg" />
            </li>
            <li>
                <img src="images/banner_bus.jpg" />
            </li>
            <li>
                <img src="images/banner_bus.jpg" />
            </li>
        </ul>
    </div>

    <div class="ui-list2">
        <div class="hd">全部线路</div>
        <div class="bd">
            <ul>
                <li>
                    <div class="img">
                        <img src="uploads/pro1.jpg" alt="">
                    </div>
                    <div class="txt">
                        <em>中巴：豪华商务7座</em>
                        <img src="images/hot.png" alt="热门">
                        <a href="#!" class="ubtn ubtn-ghost">预定用车</a>
                    </div>
                </li>
                <li>
                    <div class="img">
                        <img src="uploads/pro1.jpg" alt="">
                    </div>
                    <div class="txt">
                        <em>中巴：豪华商务7座</em>
                        <img src="images/sale.png" alt="特价">
                        <a href="#!" class="ubtn ubtn-ghost">预定用车</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</section>


<script src="js/zepto.min.js"></script>
<script src="js/app.js"></script>
<script>
$(function() {
    $('.slide').each(function() {
        var $self = $(this),
            $nav,
            length = $self.find('li').length;

        if (length < 2) {
            return;
        }
        var nav = ['<div class="nav">'];
        for (var i = 0 ; i < length; i++) {
            nav.push( i === 0 ? '<i class="current"></i>' : '<i></i>');
        }
        nav.push('</div>');
        $self.append(nav.join(''));
        $nav = $self.find('i');

        $(this).swipeSlide({
            index : 0,
            continuousScroll : true,
            autoSwipe : false,
            lazyLoad : true,
            firstCallback : function(i,sum){
                $nav.eq(i).addClass('current').siblings().removeClass('current');
            },
            callback : function(i,sum){
                $nav.eq(i).addClass('current').siblings().removeClass('current');
            }
        });
    })
})
</script>
</body>
</html>